import { find, remove, cloneDeep } from 'lodash'

import video from '../store/video'

function initScreenArr(mode) {
  const screens = []
  for (let i = 0; i < mode; i++) {
    const id = `screen${i}`
    const obj = getBoundingClientRect(id)
    if (obj) {
      const { width, height } = obj
      screens.push({ width, height, id, status: 'play', player: null })
    }
  }
  video.setScreenArr(screens)
}

function getBoundingClientRect(id) {
  const element = document.getElementById(id)
  return element ? element.getBoundingClientRect() : null
}

// 聚焦屏幕
function focusScreen(id) {
  const { curScreenId } = video
  // 改变上一个聚焦分屏的样式
  if (curScreenId) {
    const screen = document.getElementById(curScreenId)
    if (screen) {
      screen.style.boxSizing = 'border-box'
      screen.style.border = '1px solid white'
    }
  }
  // 聚焦新的分屏
  const screen = document.getElementById(id)
  if (screen) {
    screen.style.border = '1px solid red'
    screen.style.zIndex = '2'
  }
  video.setCurScreenId(id)
}

// 记录正在播放视频的标签和对象
function setPlayingScreens(actions, ids) {
  const { playingScreens, screenArr } = video
  const len = ids.length
  if (actions.length === len) {
    const screens = cloneDeep(playingScreens)
    for (let i = 0; i < len; i++) {
      remove(screens, (item) => {
        return item.id === ids[i]
      })
      if (actions[i] === 'playVideo') {
        const { player, status } = find(screenArr, ['id', ids[i]])
        if (player) {
          screens.push({ id: ids[i], player, status, root: player.root })
        }
      }
    }
    video.setPlayingScreens(screens)
  }
}

function outOfArea(element, throttledValue) {
  if (element) {
    const { clientX, clientY } = throttledValue
    const { left, top, width, height } = element.getBoundingClientRect()
    return clientX > left + width || clientX < left || clientY > top + height || clientY < top
  }
  return false
}

function getPath(path) {
  return path[3]
}

function getVideoContainer(element) {
  return element?.firstChild?.lastChild
}

function setVideoDom(id, action = 'insert') {
  const screen = document.getElementById(id)
  const container = getVideoContainer(screen)
  if (container) {
    action === 'insert' ? appendContainer(screen, container, id) : clearContainer(screen, container)
    return true
  } else {
    return false
  }
}

function setOneScreenDom(id) {
  const screen = document.getElementById(id)
  const container = getVideoContainer(screen)
  const oneScreen = document.getElementById('screen0')
  clearContainer(screen, container)
  const onScreenContainer = getVideoContainer(oneScreen)
  appendContainer(oneScreen, onScreenContainer, id)
}

// 插入视频container
function appendContainer(screen, container, id) {
  try {
    screen.firstChild.removeChild(container)
    const root = find(video.playingScreens, ['id', id])?.root
    screen.firstChild.append(root)
  } catch (e) {
    video.setMode(video.setLastMode)
  }
}

// 把视频container换成空的container标签
function clearContainer(screen, container) {
  screen.firstChild.removeChild(container)
  const div = document.createElement('div')
  div.setAttribute('class', 'video-container')
  screen.firstChild.append(div)
}

// 退出单屏
function exitOneScreen() {
  const screen = document.getElementById('screen0')
  const container = getVideoContainer(screen)
  clearContainer(screen, container)
}

function deepFindScreenId(target) {
  const { id } = target
  if (id && id !== '') {
    return id
  } else {
    let parentNode = target
    do {
      parentNode = parentNode.parentNode
    } while (parentNode.id === '' || !parentNode.id)
    return parentNode.id
  }
}

function MouseInScreen(x, y) {
  const { screenArr } = video
  for (const screen of screenArr) {
    const { left, top, width, height } = getBoundingClientRect(screen.id)
    const leftRange = { lmin: left, lmax: left + width }
    const topRange = { tmin: top, tmax: top + height }
    const { lmin, lmax } = leftRange
    const { tmin, tmax } = topRange
    if (x >= lmin && x < lmax && y >= tmin && y < tmax) {
      return screen
    }
  }
  return null
}

export {
  initScreenArr,
  focusScreen,
  setPlayingScreens,
  outOfArea,
  getPath,
  getVideoContainer,
  setVideoDom,
  deepFindScreenId,
  getBoundingClientRect,
  MouseInScreen,
  exitOneScreen,
  setOneScreenDom,
}
